<html>

<head>
    <title>Highcharts 区域叠加百分比</title>
    <meta charset="utf-8">
    <style>
        .container {
            width: 550px;
            height: 400px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="container"></div>
    <script src="../lib/jquery-3.5.1.min.js"></script>
    <script src="../lib/highcharts.js"></script>
    <script>
        $(function () { 
            var chart = { type: 'area' };
            var title = { text: 'Historic and Estimated Worldwide Population Growth by Region' };
            var subtitle = { text: 'guides' };
            var xAxis = {
                categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
                tickmarkPlacement: 'on',
                title: {
                    enabled: false
                }
            };
            var yAxis = {
                title: { text: 'Billions' },
                labels: {
                    formatter: function () { return this.value / 1000; }
                }
            };
            var plotOptions = {
                area: {
                    stacking: 'percent',
                    lineColor: '#666666',
                    lineWidth: 1,
                    marker: { lineWidth: 1, lineColor: '#666666' }
                }
            };
            var credits = { enabled: false }
            // 提示
            var tooltip = { shared: true, valueSuffix: ' millions' };

            // 数据
            var series = [{
                    name: 'Asia',
                    data: [502, 635, 809, 947, 1402, 3634, 5268]
                }, {
                    name: 'Africa',
                    data: [106, 107, 111, 133, 221, 767, 1766]
                }, {
                    name: 'Europe',
                    data: [163, 203, 276, 408, 547, 729, 628]
                }, {
                    name: 'America',
                    data: [18, 31, 54, 156, 339, 818, 1201]
                }, {
                    name: 'Oceania',
                    data: [2, 2, 2, 6, 13, 30, 46]
                }
            ];
            var data = {
                chart: chart, title: title, subtitle: subtitle, xAxis: xAxis, yAxis: yAxis,
                tooltip: tooltip, series: series, plotOptions: plotOptions, credits: credits
            };
            $(".container").highcharts(data);
        });
    </script>
</body>

</html>